<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String contextPath = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<meta name="google-site-verification" content="mY9jjzR_vC43fH5EOAZCEOPPwKEOTyQP066xoVlVYoE" />
<meta name="verify-v1" content="+YB+vkknTyx8SbIo6/BxBxYvr3+urnSPszGBdgk6y5c=" />
<meta name="y_key" content="df64ff47c26942be" />
<meta name="robots" content="index, follow" />
<meta name="description" content="CSS3 Toggler mit Transform &amp; Transition und ohne JavaScript" />
<meta name="keywords" content="CSS3 Transform, CSS3 Transition, CSS Sprite, CSS3 Tutorial, CSS3, CSS, Workshop, Tutorial" />
<link rel="stylesheet" href="css/css3-toggler.css" type="text/css" media="screen" />
<head>
<meta charset="UTF-8">
<title>Menu</title>
<style type="text/css">
	#wrapper{
		margin-left: 80px;
		width: 800px;
		margin-bottom: 270px;
	}
	.product_line { 
		width:705px; height:2px; float:left; background:#d3ccbe;
	}
	a:LINK{
		text-decoration: none;
	}
</style>
</head>
<body>
	<div id="wrapper">
		<table>
			<tr>
				<td style="vertical-align: bottom; text-align: left">
					<img src="images/giftcard/giftcard_menu.png" width="100%" style="margin-left: -10px">
				</td>
				<td style="text-align: right" width="550px">
					<img src="images/giftcard/giftcard_menu_img.png" width="55%">
				</td>
			</tr>
		</table>
		<p class="product_line"></p>
		<br>
		<!-- 아코디언 메뉴 시작 -->		
		<div id="main">
			<div id="content">
				<ul class="tutorialMenu">
					<li id="coffeecards">
						<h2><a href="#coffeecards">Coffee Gift Card</a></h2>
						<p>
							<span>
								<br>
								<a href="<%=contextPath %>/giftCardDetail.do?itemNum=1000">
									<img src="images/giftcard/giftcard1000.png" width="33%">
								</a><br><br>
								<a href="<%=contextPath %>/giftCardDetail.do?itemNum=1001">
									<img src="images/giftcard/giftcard1001.png" width="33%">&nbsp;&nbsp;&nbsp;
								</a>
								<a href="<%=contextPath %>/giftCardDetail.do?itemNum=1002">
									<img src="images/giftcard/giftcard1002.png" width="33%">
								</a>
							</span>
						</p>
					</li>
					<li id="blogcomments">
						<h2><a href="#blogcomments">Beverage Gift Card</a></h2>
						<p><span>
							<br>
							<a href="<%=contextPath %>/giftCardDetail.do?itemNum=1003">
								<img src="images/giftcard/giftcard1003.png" width="33%"><br><br>
							</a>
							<a href="<%=contextPath %>/giftCardDetail.do?itemNum=1004">
								<img src="images/giftcard/giftcard1004.png" width="33%">&nbsp;&nbsp;&nbsp;
							</a>
							<a href="<%=contextPath %>/giftCardDetail.do?itemNum=1005">
								<img src="images/giftcard/giftcard1005.png" width="33%">
							</a>
						</span></p>
					</li>
					<li id="onlineform">
						<h2><a href="#onlineform">Bakery Gift Card</a></h2>
						<p><span>
							<br>
							<a href="<%=contextPath %>/giftCardDetail.do?itemNum=1006">
								<img src="images/giftcard/giftcard1006.png" width="33%"><br><br>
							</a>
							<a href="<%=contextPath %>/giftCardDetail.do?itemNum=1007">
								<img src="images/giftcard/giftcard1007.png" width="33%">&nbsp;&nbsp;&nbsp;
							</a>
							<a href="<%=contextPath %>/giftCardDetail.do?itemNum=1008">
								<img src="images/giftcard/giftcard1008.png" width="33%">
							</a>
						</span></p>
					</li>
					<li>
						<br><br>
					</li>
					<li>
						<ul style="font-family: nanum;">
							<li style="color: #870200; font-weight: bold;">본 제품 교환권은 커피 하겐나 홈페이지에서만 할인된 가격으로 구매하실 수 있습니다.</li>
							<li>본 제품 교환권은 각 제품 카테고리 내에서 가장 인기있는 상품으로 구성된 것입니다.</li>
							<li>본 제품 교환권은 10매가 한 set이며, 1매씩 구매는 불가능합니다.</li>
							<li>본 제품 교환권은 최대 50매 구매하실 수 있습니다.</li>
							<li>본 제품 교환권은 각각 기재된 제품으로 교환하실 수 있습니다.</li>
							<li>
								기재된 제품과 가격이 동일하고, 동일한 카테고리 내에 있는 상품으로의 교환도 가능합니다.<br>
								<span style="font-size: 10pt">(ex. 리얼초코 → 그린티,레드애플)</span>
							</li>
							<li style="color: #004000; font-weight: bold;">
								본 제품 교환권을 구매하시려면 해당 교환권 이미지를 클릭하세요!</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
		<!-- 아코디언 메뉴 끝 -->
	</div>
</body>
</html>